<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="content">碎片兑换</block></cu-custom>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-green cur text-bold':''" v-for="(item,index) in tap" :key="index" @tap="tabSelect" :data-id="index">
					{{tap[index]}}
				</view>
			</view>
		</scroll-view>
		<view class="padding" v-show="TabCur == 0">
			<view class="solid-bottom bg-white" v-for="(item,index) in coreslist" :key="index">
				<view class="text-sm padding-sm text-grey">
					<view class="content fl text-ablack text-df">
						操作:{{item.memo}}
					</view>
					<view class="action fr text-df" :class="[item.cores > 0?'text-green':'text-red']">
						<text v-show="item.cores > 0">+</text>{{item.cores}}
					</view>
				</view>
				<view style="clear: both;"></view>
				<view class="text-sm padding-sm text-grey">
					<view class="content fl text-ablack text-df">
						变更前:{{item.before}}
					</view>
					<view class="action fl text-ablack text-df padding-left">
						变更后:{{item.after}}
					</view>
				</view>
				<view style="clear: both;"></view>
				<view class="text-sm padding-sm text-grey">
					<view class="content fl text-gray text-df">
						{{item.createtime_text}}
					</view>
				</view>
				<view style="clear: both;"></view>
				<view class="text-df padding-sm text-ablack" v-if="item.mes != null">
					<view style="width: 20%;height: 130upx;margin-right: 10upx;" class="fl"  v-for="(mes_item,mes_index) in item.mes" :key="mes_index">
						<image :src="mes_item.adimage" mode="aspectFill" style="width: 100%;height: 100%;"  @click="viewImages(mes_item.adimage)"></image>
					</view>
				</view>
				<view style="clear: both;"></view>
				<view style="width: 100%;height: 20upx;"></view>
			</view>
		</view>
		<view class="padding" v-show="TabCur == 1">
			<view class="padding-lr bg-white">
				<view class="padding" v-html='exchangemes.content'></view>
			</view>
			<view class="flex align-center bg-white margin-top">
				<view class="padding-sm">现有碎片</view>
				<view class="flex-sub">
					<view class="padding-sm text-ablack">{{cores}}</view>
				</view>
			</view>
			<view style="width: 100%;height: 40upx;"></view>
			<view class="flex flex-direction">
				<button class="cu-btn bg-green lg text-bold text-l"  style="line-height: 2.8em;width: 50%;margin-left: 25%;" @click="doexchange()">点击兑换</button>
			</view>
			<view style="width: 100%;height: 20upx;"></view>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text> 兑换历史
				</view>
			</view>
			<view class="solid-bottom bg-white" v-for="(item,index) in list" :key="index">
				<view class="text-sm padding-sm text-grey">
					<view class="content fl text-ablack text-df">
						消耗碎片:{{item.cores}}
					</view>
					<view class="content fr text-gray text-df">
						兑换时间:{{item.createtime_text}}
					</view>
				</view>
				<view style="clear: both;"></view>
				<view class="text-sm padding-sm text-grey">
					<view class="content fl text-green text-df">
						变更前:{{item.before}}
					</view>
					<view class="content fr text-green text-df">
						变更后:{{item.after}}
					</view>
				</view>
				<view style="clear: both;"></view>
				<view style="width: 100%;height: 20upx;"></view>
			</view>
		</view>
		<view class="padding" v-show="TabCur == 2">
			<view class="padding-lr bg-white">
				<view class="padding">每个用户24小时内提现的额度为2000元，提现次数为10次。</view>
			</view>
			<view class="flex align-center bg-white margin-top">
				<view class="padding-sm">现有碎片</view>
				<view class="flex-sub">
					<view class="padding-sm text-ablack">{{cores}}</view>
				</view>
			</view>
			<view class="flex align-center bg-white margin-top">
				<view class="padding-sm">今日额度</view>
				<view class="flex-sub">
					<view class="padding-sm text-ablack">{{last}}</view>
				</view>
			</view>
			<view style="width: 100%;height: 40upx;"></view>
			<view class="flex flex-direction">
				<button class="cu-btn bg-green lg text-bold text-l"  style="line-height: 2.8em;width: 50%;margin-left: 25%;" @click="withdrawal()">点击提现</button>
			</view>
			<view style="width: 100%;height: 20upx;"></view>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text> 提现历史
				</view>
			</view>
			<view class="solid-bottom bg-white" v-for="(item,index) in withdrawlist" :key="index">
				<view class="text-sm padding-sm text-grey">
					<view class="content fl text-ablack text-df">
						消耗碎片:{{item.money}}
					</view>
					<view class="action fr text-ablack text-df" v-show="item.state == 0">
						等待审核
					</view>
					<view class="action fr text-green text-df" v-show="item.state == 1">
						提现成功
					</view>
					<view class="action fr text-red text-df" v-show="item.state == 2">
						提现失败
					</view>
				</view>
				<view style="clear: both;"></view>
				<view class="text-sm padding-sm text-grey">
					<view class="content fl text-green text-df">
						支付宝账号:{{item.remark}}
					</view>
				</view>
				<view style="clear: both;"></view>
				<view class="text-sm padding-sm text-grey">
					<view class="content fl text-gray text-df">
						申请时间:{{item.createtime_text}}
					</view>
				</view>
				<view style="clear: both;"></view>
				<view style="width: 100%;height: 20upx;"></view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='doexchange'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">兑换poke币</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group margin-top">
						<view class="title">提现数量</view>
						<input placeholder="请输入要提现的数量" type="number" name="input" v-model="postcores"></input>
						<button class='cu-btn bg-green shadow' @click="maxexchange()">一键兑换</button>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="surePost()">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='postwithdraw'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">申请提现</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group margin-top">
						<view class="title">支付宝账号</view>
						<input placeholder="请输入支付宝账号" name="input" v-model="postali"></input>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">提现金额</view>
						<input placeholder="请输入要提现的金额" type="number" name="input" v-model="postmoney"></input>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="sureWithdraw()">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				tap:['碎片流水','碎片兑换','碎片提现'],
				postcores:0,
				cores:0,
				modalName: null,
				hasData: true,
				list:[],
				page:1,
				count:0,
				coreslist:[],
				corespage:1,
				corescount:0,
				coresData: true,
				exchangemes:getApp().globalData.explainMes[8],
				last:0,
				withdrawlist:[],
				withdrawpage:1,
				withdrawcount:0,
				postali:'',
				postmoney:0,
			};
		},
		onLoad(options){
			this.TabCur = options.id
		},
		onShow() {
			this.init();
		},
		methods: {
			withdrawal(){
				this.modalName = 'postwithdraw';
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			init(){
				this.list = [];
				this.page = 1;
				this.count = 0;
				this.hasData = true;
				this.coreslist = [];
				this.corespage = 1;
				this.corescount = 0;
				this.coresData = true;
				this.withdrawlist = [];
				this.withdrawpage = 1;
				this.withdrawcount = 0;
				this.withdrawData = true;
				this.getuser();
				this.exchangeList();
				this.coresList();
				this.withdrawList();
				this.getlast();
			},
			getuser(){
				let _this = this;
				uni.request({
					url: _this.$globals.apibase+'/api/Shop/userCore',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							_this.cores = res.data.data.user_desc.cores;
						}
					}
				});
			},
			sureWithdraw(){
				let _this = this;
				if(this.postali == ''){
					uni.showToast({
						icon: 'none',
						title: '支付宝账号不能为空'
					});
					return;
				}
				if(this.postmoney < 1){
					uni.showToast({
						icon: 'none',
						title: '提现碎片不能小于1!'
					});
					return;
				}
				if(parseFloat(this.postmoney) > parseFloat(this.cores)){
					uni.showToast({
						icon: 'none',
						title: '提现碎片不能超过现有碎片!'
					});
					return;
				}
				if(parseFloat(this.postmoney) > parseFloat(this.last)){
					uni.showToast({
						icon: 'none',
						title: '提现碎片不能超过今日额度!'
					});
					return;
				}
				uni.request({
					url: _this.$globals.apibase+'/api/Usersys/postCoresdrawal',
					data: {
						token: uni.getStorageSync('token'),
						money:_this.postmoney,
						remark:_this.postali,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							uni.showToast({
								icon: 'none',
								title: '申请成功!',
								duration:5000,
							});
							this.modalName = null,
							_this.init();
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			getlast(){
				let _this = this;
				uni.request({
					url: _this.$globals.apibase+'/api/Userways/userCouldCoresdraw',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							_this.last = res.data.data.last;
						}
					}
				});
			},
			withdrawList(){
				let _this = this;
				uni.request({
					url: _this.$globals.apibase+'/api/Usersys/alicoresdrawlog',
					data: {
						token: uni.getStorageSync('token'),
						page: _this.withdrawpage,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							_this.withdrawcount = res.data.data.count;
							for(let i=0;i<res.data.data.list.length;i++){
								_this.withdrawlist = _this.withdrawlist.concat(res.data.data.list[i])
							}
							if(_this.withdrawlist.length >= _this.withdrawcount){
								_this.withdrawData = false
							}
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			doexchange(){
				this.modalName = 'doexchange';
			},
			hideModal(e) {
				this.modalName = null
			},
			surePost(){
				let _this = this;
				if(this.postcores < 1){
					uni.showToast({
						icon: 'none',
						title: '兑换碎片数量不能小于1!'
					});
					return;
				}
				if(parseFloat(this.postcores) > parseFloat(this.cores)){
					uni.showToast({
						icon: 'none',
						title: '兑换碎片数量不能超过现有碎片数量!'
					});
					return;
				}
				uni.request({
					url: _this.$globals.apibase+'/api/Shop/postExchangeCore',
					data: {
						token: uni.getStorageSync('token'),
						cores:_this.postcores,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							uni.showToast({
								icon: 'none',
								title: '兑换成功!',
								duration:5000,
							});
							this.modalName = null,
							_this.init();
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			exchangeList(){
				let _this = this;
				uni.request({
					url: _this.$globals.apibase+'/api/Shop/exchangeCoreLog',
					data: {
						token: uni.getStorageSync('token'),
						page: _this.page,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							_this.count = res.data.data.count;
							for(let i=0;i<res.data.data.list.length;i++){
								_this.list = _this.list.concat(res.data.data.list[i])
							}
							if(_this.list.length >= _this.count){
								_this.hasData = false
							}
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			coresList(){
				let _this = this;
				uni.request({
					url: _this.$globals.apibase+'/api/Shop/coreLog',
					data: {
						token: uni.getStorageSync('token'),
						page: _this.corespage,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							_this.corescount = res.data.data.count;
							for(let i=0;i<res.data.data.list.length;i++){
								res.data.data.list[i].mes = JSON.parse(res.data.data.list[i].data);
								_this.coreslist = _this.coreslist.concat(res.data.data.list[i])
							}
							if(_this.coreslist.length >= _this.corescount){
								_this.coresData = false
							}
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			maxexchange(){
				this.postcores = this.cores
			},
		},
		onReachBottom() {
			if (this.hasData) {
				this.page++;
				this.exchangeList();
			}
			if (this.coresData) {
				this.corespage++;
				this.coresList();
			}
			if (this.withdrawData) {
				this.withdrawpage++;
				this.withdrawList();
			}
		},
	}
</script>

<style>
</style>
